<template>
  <div>
    <basic-container>
        <avue-crud :option="option" :data="data" ref="crud"
                   @row-save="handleSave"
                   @row-edit="handleRowEdit"
                   @row-update="handleUpdate"
                   @row-del="handleRowDel"
                   @row-view="handleView">
          <template slot-scope="scope" slot="menuLeft">
            <el-button type="primary"  size="small" icon="el-icon-check" @click.stop="handleAdd()">新增</el-button>
          </template>
            <template slot-scope="scope" slot="menu" >
              <el-button type="primary" icon="el-icon-check" @click.stop="handleView(scope.row,scope.index)">查看</el-button>
              <el-button type="info" icon="el-icon-check" @click.stop="handleRowEdit(scope.row,scope.index)">修改</el-button>
              <el-button type="danger" icon="el-icon-check" @click.stop="handleRowDel(scope.row,scope.index)">删除</el-button>
            </template>
        </avue-crud>
    </basic-container>
  </div>
</template>

<script>
    import {treeList,getPageList,add,edit,del} from '@/api/shop/ShopClass/ShopClass';
    import { validatenull } from '@/util/validate';
    import { mapGetters } from "vuex";
    import { classOption } from "@/const/shop/ShopClass/ClassOption.js";
    export default {
        name: "tableTree",
        components: {},
        data () {
          return {
            form:{},
            shopClass:{},
            data:[],
            option:classOption
          };
        },
        created () {
            this.handleList();
        },
        watch: {},
        mounted () { },
        computed: {
            ...mapGetters(["permission", "menuAll"])
        },
        methods: {
            /**
             * @title 获取字典
             * @detail 调用crud的findByvalue方法即可
             *
             **/
            findByvalue (dic, value) {
                return this.$refs.crud.findByvalue(dic, value);
            },
          handleList () {
            treeList().then(res => {
                this.data = res.data.data;
            });

          },
            /**
             * @title 数据添加
             *
             **/
            handleAdd () {
            this.$refs.crud.rowAdd();
          },
          /**
           * @title 数据添加
           * @param row 为当前的数据
           * @param done 为表单关闭函数
           *
           **/
          handleSave (row, done) {
            add(row).then(res => {
              this.handleList();
              this.$message({
                showClose: true,
                message: "添加成功",
                type: "success"
              });
              done();
            })
          },
            /**
             * @title 数据更新
             *
             **/
          handleRowEdit (row, index) {
            this.$refs.crud.rowEdit(row, index);
          },
          /**
           * @title 数据更新
           * @param row 为当前的数据
           * @param index 为当前更新数据的行数
           * @param done 为表单关闭函数
           *
           **/
          handleUpdate (row, index, done) {
            edit(row).then(res => {
              this.handleList();
              this.$message({
                showClose: true,
                message: "修改成功",
                type: "success"
              });
              done();
            })
          },
          /**
           * @title 数据删除
           * @param row 为当前的数据
           * @param index 为当前更新数据的行数
           *
           **/
          handleRowDel (row, index) {
              this.$confirm(`是否确认删除${row.className}`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            })
                    .then(() => {
                        del(row.id).then(res => {
                            this.handleList();
                            this.$message({
                                showClose: true,
                                message: "删除成功",
                                type: "success"
                            });
                        })
                    })
                    .catch(() => { });
          },
          /**
           * @title 打开查看窗口
           * @detail 调用crud的handleview方法即可
           *
           **/
          handleView (row, index) {
            this.$refs.crud.rowView(row, index);
          },
        }
    };
</script>

<style lang="scss" scoped>
  .table-container {
    padding: 8px 10px;
  }
</style>

